<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../font-awesome-4.7.0/reset.css">
    <link rel="stylesheet" href="../css/car.css">
    <script src="car.js"></script>
    <title>我的机动车</title>
</head>
<body>
<!--------总容器-------->
<div class="upper">
    <div class="header">
        <p onclick="location.href='index.html'">< 返回</p>
        <h1>我的机动车</h1>
    </div>
    <!--------车辆信息-------->
    <div class="car-info">
        <div class="car-info-main"   style="background: linear-gradient(to bottom,#e4f0fe,white);">
            <div class="car-info-main1">
                <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/28.jpg"/>
                <div class="car-info-main-mess">
                    <h3>琼CA1234</h3>
                    <p>*三</p>
                </div>
            </div>
            <p class="fa fa-qrcode"></p>
        </div>
        <div class="line"></div>
        <div class="no-detailed">
            <div class="mess">
                <h3>机动车状态</h3>
                <div class="style">
                   <p>正常</p>
                </div>
            </div>
            <div class="line"></div>
            <div class="mess1">
                <i class="fa fa-angle-down" id="showBt"></i>
            </div>
        </div>
        <!--------车辆明细信息-------->
        <ul id="detailed">
            <li>
                <h3>抵押登记状态</h3>
                <p>未抵押登记</p>
            </li>
            <div class="line"></div>
            <li>
                <h3>注册登记日期</h3>
                <p>2018-06-06</p>
            </li>
            <div class="line"></div>
            <li>
                <h3>检验有效期止</h3>
                <p>2028-07-01</p>
            </li>
            <div class="line"></div>
            <li>
                <h3>强制报废期止</h3>
                <p>2099-12-31</p>
            </li>
            <div class="line"></div>
            <li>
                <h3>交强险终止日期</h3>
                <p>2028-06-06</p>
            </li>
            <div class="line"></div>
            <li>
                <h3>联系方式</h3>
                <p>178****3844 <i class="fa fa-pencil"></i></p>
            </li>
            <div class="line"></div>
            <li>
                <h3>被他人备案记录</h3>
                <p>></p>
            </li>
            <div class="line"></div>
            <li class="arrow" id="detailedBox">^</li>
        </ul>
        <!--------补充信息-------->
        <div class="supplement">
            <p>本人车辆信息缺失或有误，请点击</p>
            <p>此处反馈</p>
        </div>
    </div>
    <!--------底部-------->
    <div class="bottom">
        <p>备案非本人机动车</p>
    </div>
</div>
</body>
</html>